<template>
    <div class="container-box-container container-box-container-margin village border-radius2">
        <div class="goBack border-radius-top">
            <el-button type="text">商城配置</el-button>
        </div>
        <el-row :gutter="20" class="mainBackgroundColor marginLeft0Right0 border-radius-bottom">
            <el-col :span="12" class="marginLeft36Right36 marginTop32">
                <el-form :model="form" ref="formRef" class="rowStyle" label-width="200px" size="small">
                    <el-form-item label="积分与现金兑换比例：" prop="pointPerCny" :rules="$validate.validates({required:true,msg:'积分与现金兑换比例不能为空'})">
                        <div>
                            <el-input v-model="form.pointPerCny" @input="form.pointPerCny = $validate.check_num(form.pointPerCny,'nodeZero')" placeholder="请输入" maxlength="3" class="width100"></el-input>
                            <span class="color085 marginLeft8">积分 = 1元</span>
                            <span class="marginLeft8 colorMainTwo">（例：100积分=1元。结算积分为100分时，商家实际获得1元）</span>
                        </div>
                    </el-form-item>
<!--                    <el-form-item label="商品的积分最低兑换比例：" prop="minDiscountRate">-->
<!--                        <el-slider class="inline-block" style="width: 240px" v-model="form.minDiscountRate"></el-slider>-->
<!--                        <div class="inline-block marginLeft10" style="vertical-align: 14px">{{form.minDiscountRate}} %</div>-->
<!--                        <div class="color045 fontSize14 line-height1" style="margin-top: -10px">（例：比例设置为30%时，商家设置的商品积分使用比例不能低于价格的30%）</div>-->
<!--                    </el-form-item>-->
                    <el-form-item label="商户结算日（每月）：" prop="settleDay" :rules="$validate.validates({required:true,msg:'商户结算日不能为空'})">
                        <el-select v-model="form.settleDay" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="paddingBottom145 btnClass1">
                        <el-button class="ed-button ed_black-bottom" @click="onSubmit('formRef')" :loading="disabled">保 存</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {configSave ,configGet} from "src/api/shoppingMall";
    export default {
        name: "ConfigureList",
        data(){
            return{
                form:{
                    pointPerCny:"",
                    minDiscountRate:0,
                    settleDay:""
                },
                options: [
                    {value: 1, label: '1号'},
                    {value: 2, label: '2号'},
                    {value: 3, label: '3号'},
                    {value: 4, label: '4号'},
                    {value: 5, label: '5号'},
                    {value: 6, label: '6号'},
                    {value: 7, label: '7号'},
                    {value: 8, label: '8号'},
                    {value: 9, label: '9号'},
                    {value: 10, label: '10号'},
                    {value: 11, label: '11号'},
                    {value: 12, label: '12号'},
                    {value: 13, label: '13号'},
                    {value: 14, label: '14号'},
                    {value: 15, label: '15号'},
                    {value: 16, label: '16号'},
                    {value: 17, label: '17号'},
                    {value: 18, label: '18号'},
                    {value: 19, label: '19号'},
                    {value: 20, label: '20号'},
                    {value: 21, label: '21号'},
                    {value: 22, label: '22号'},
                    {value: 23, label: '23号'},
                    {value: 24, label: '24号'},
                    {value: 25, label: '25号'},
                    {value: 26, label: '26号'},
                    {value: 27, label: '27号'},
                    {value: 28, label: '28号'},
                    {value: -1, label: '最后一天'}
                ],
                disabled:false
            }
        },
        mounted(){
            configGet({}).then(response => {
                if(response.code == 20000 && response.data) {
                    this.form.id = response.data.id;
                    this.form.minDiscountRate = response.data.minDiscountRate ? response.data.minDiscountRate * 100 : 0;
                    if(this.form.minDiscountRate > 100){
                        this.form.minDiscountRate = 100
                    }
                    this.form.pointPerCny = response.data.pointPerCny;
                    this.form.settleDay = response.data.settleDay;
                }
            })
        },
        methods:{
            onSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.disabled = true;
                        let query = this.form.copy();
                        // query.minDiscountRate = query.minDiscountRate / 100;
                        query.minDiscountRate = 1;
                        configSave(query).then(response => {
                            if(response.code == 20000) {
                                this.$message.success({
                                    message: '商品配置保存成功',
                                    duration: 2000,
                                    center:true
                                })
                            }
                            this.disabled = false
                        }).catch(()=>{
                            this.disabled = false
                        })
                    }
                })

            }
        }
    }
</script>

<style scoped>

</style>